<template>
	<div id="app">
		<main>
			<h2>page news</h2>
		</main>
	</div>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			logo: require('@/assets/img/vue-logo.png'),
			img_01: require('@/assets/img/4.66M.jpg')
		};
	},
	methods: {
		
	}
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/mixin';

#app {
	height: 100vh;
	main {
		padding: 10% 0 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		img {
			width: 180px;
		}
		h2 {
			text-align: center;
			font-size: 40px;
		}
		p {
			font-size: 18px;
			text-align: center;
			margin: 15px 0 0 0;
		}
	}
	footer {
		margin: 40px 0 0 0;
		display: flex;
		justify-content: center;
		.btn {
			margin: 0 20px;
			padding: 8px 15px;
			border: 1px solid #333;
			border-radius: 6px;
			cursor: pointer;
		}
	}
}
</style>
